<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_纯回调引发的问题</title>
</head>

<body>
  <script>
    function sendAjax(url, data, success, error) {
      // 实例 xhr
      const xhr = new XMLHttpRequest();
      // 绑定监听
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) success(xhr.response);
          else error('请求出了点问题');
        }
      };
      // 整理参数
      let str = '';
      for (let key in data) {
        str += `${key}=${data[key]}&`;
      };
      str = str.slice(0, -1);
      // 配置请求
      xhr.open('GET', url + '?' + str);
      xhr.responseType = 'json';
      // 发送请求
      xhr.send();
    };

    // 发送第 1 次请求
    sendAjax(
      'https://api.apiopen.top/api/getShortVideo',
      { page: 1, size: 10 },
      (response) => {
        console.log('成功了1:', response);
        // 发送第 2 次请求
        sendAjax(
          'https://api.apiopen.top/api/getShortVideo',
          { page: 1, size: 10 },
          (response) => {
            console.log('成功了2:', response);
            // 发送第 3 次请求
            sendAjax(
              'https://api.apiopen.top/api/getShortVideo',
              { page: 1, size: 10 },
              (response) => {
                console.log('成功了3:', response);
              },
              (err) => {
                console.log('失败了3:', err);
              },
            );
          },
          (err) => {
            console.log('失败了2:', err);
          },
        );
      },
      (err) => {
        console.log('失败了1:', err);
      },
    );

    // 回调地狱: 代码可读性非常差、后期不好维护.
  </script>
</body>

</html>